import React, { useEffect, useState } from 'react'
import { getPublish_list } from '@/utils/index'
// import {goPublish } 
import * as Active from '@/store/modules/modules'
import { useDispatch } from 'react-redux'
import { Link } from 'react-router-dom';
// 引入样式
import '../Home/css/Collection/Collection.scss'
// 引入图片
import tuiguang from '../../../public/tuiguangdingdan.png'
import shuju from '../../../public/shuju.png'
import bianji from '../../../public/bianji.png'
function Collection() {
  const [list, setList] = useState<any>()
  const disPatch = useDispatch()
  useEffect(() => {
    const publishList = async () => {
      let userId = JSON.parse(localStorage.getItem('userId') as string)
      let { data } = await getPublish_list({ userId })
      console.log(data, 'ressss');
      if (data.code === 200) {
        setList(data.list)
      }
    }
    publishList()
  }, [])
  const handleEdit = (item: any) => {
    disPatch(Active.goPublish(item))
  }
  return (

    <div className='CollectionBox'>
      {
        list && list.map((item: any, index: any) => (
          <div className='publishBox' key={index}>
            <div className='publishBox_content' >
              <img width={'100%'} height={'100%'} src={item.baseimage64} alt="" />
            </div>
            <div className='publish_icon'>
              <Link to='/dragDrop' >
                <img onClick={() => handleEdit(item.userData)} src={bianji} alt="" />
              </Link>
              <img src={shuju} alt="" />
              <img src={tuiguang} alt="" />
            </div>
          </div>
        ))
      }
    </div>
  )
}

export default Collection
